<template>
  <van-popup v-model="popupShow" :position="position" style="max-height:80vh;border-radius: 20px 20px 0 0;">
    <div class="popup-content">
      <svg-icon icon-class="delete-2" class="color-gray fs-26 popup-close" @goPage="closePopup" />
      <div v-show="(popupType = 'sku')" class="pb-170">
        <div class="flex pb-30 hb">
          <img-box class="is-200 br-10 flex-s-0" :img-url="data.logo" />
          <div class="prductItem-detail ml-20 flex-1">
            <p class="text-show-line-2 mb-10 fs-24">{{ data.ProductName }}</p>
            <p class="color-primary fs-40"><span class="fs-26">￥</span>{{ data.V_GradePrice }}</p>
            <p class="color-gray fs-26">库存 {{ data.V_StockSum }}</p>
            <p class="color-gray fs-26">起批 {{ data.V_StockSum }}</p>
          </div>
        </div>
        <div class="skuItem hb">
          <p class="color-gray-light fs-24 mt-20">单位：</p>
          <div class="mt-20 flex-v-c flex-wrap">
            <div class="skuBtn color-primary">个</div>
            <div class="skuBtn">盒</div>
            <div class="skuBtn color-shadow">箱</div>
          </div>
        </div>
        <div class="skuItem hb">
          <p class="color-gray-light fs-24 mt-20">颜色：</p>
          <div class="mt-20 flex-v-c flex-wrap">
            <div class="skuBtn color-primary">象牙白01</div>
            <div class="skuBtn">象牙白02</div>
            <div class="skuBtn color-shadow">象牙白03</div>
          </div>
        </div>
        <div class="skuItem">
          <div class="flex-s-c mt-24 color-gray-light fs-24 ">
            <div class="flex-1 tal">颜色(g)</div>
            <div class="flex-1 tac">库存(个)</div>
            <div class="flex-1 tar">购买数量</div>
          </div>

          <div class="flex-s-c mt-24 fs-28 ">
            <div class="flex-1 tal">50</div>
            <div class="flex-1 tac">100</div>
            <div class="flex-1 tar flex-fe-c">
              <span class="btn-minus flex-s-0 color-shadow" @click="minus">-</span>
              <div class="btn-input-box">
                <input v-model="data.ppp" type="number" class="btn-input">
              </div>
              <span class="btn-plus flex-s-0" @click="plus">+</span>
            </div>
          </div>
        </div>
        <div class="fixed-bottom  bottom-box">
          <button class="btn-large color-white bg-primary" @click="">加入购物车</button>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
  name: 'Popup',
  components: {
    imgBox
  },
  props: {
    data: {
      // 数据
      type: Object,
      required: true
    },
    popupType: {
      // 弹窗类型
      type: String,
      required: true
    },
    popupShow: {
      // 显示弹窗
      type: Boolean,
      required: true,
      default: false
    },
    position: {
      //  弹出方向
      type: String,
      required: false,
      default: 'bottom'
    }
  },
  data() {
    return {}
  },
  watch: {},
  created() {},
  methods: {
    // 关闭弹窗
    closePopup() {
      this.$emit('closePopup')
    },
    // 加
    plus() {
      this.$emit('plus')
    },
    // 减
    minus() {
      this.$emit('minus')
    }
  }
}
</script>

<style lang="scss" scoped>
// 弹窗组件
.popup-content {
  padding: 30px;
  position: relative;
  .popup-close {
    position: absolute;
    right: 30px;
    top: 30px;
  }
  .prductItem-detail {
    position: relative;
    .prductItem-p-left {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .prductItem-p-right {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .skuItem {
    padding-bottom: 4px;
    .skuBtn {
      position: relative;
      font-size: 28px;
      line-height: 64px;
      padding: 0 30px;
      min-width: 136px;
      border-radius: 8px;
      overflow: hidden;
      margin: 0 20px 20px 0;
      text-align: center;
      &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: currentColor;
        opacity: 0.1;
        top: 0;
        left: 0;
      }
    }
    .btn-input-box {
      position: relative;
      margin: 0 4px;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
      .btn-input {
        position: relative;
        z-index: 1;
        height: 56px;
        width: 80px;
        line-height: 1;
        border: none;
        // background: transparent;
        text-align: center;
      }
    }
    .btn-minus,
    .btn-plus {
      position: relative;
      font-size: 45px;
      line-height: 56px;
      height: 56px;
      width: 56px;
      text-align: center;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
    }
    .btn-minus {
      border-radius: 8px 0 0 8px;
    }
  }
}
.bottom-box {
  padding: 0 30px 50px 30px;
}
</style>
